<template>
  <div class="content-block block-2">
    <div class="info-head">{{ title }}</div>
    <div v-if="radarIndicator && radarIndicator.length > 0 && radarData && radarData.length > 0" class="info-content">
      <v-chart :option="chartOption" style="width: 100%;height:300px;"></v-chart>
    </div>
  </div>
</template>

<script>
import MixinChartOptionToolbox from '@/mixins/chart-option-toolbox';
import { defaultNumber } from '@/utils';

export default {
  name: 'grid-item-two',
  mixins: [MixinChartOptionToolbox],
  props: {
    radarName: String,
    radarIndicator: {
      type: Array,
      default () {
        return [];
      },
    },
    radarData: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    title () {
      return this.radarName || '';
    },
    chartOption () {
      return {
        tooltip: {},
        toolbox: this.getChartOptionToolbox({
          feature: {
            magicType: null
          }
        }),
        radar: {
          indicator: [
            ...this.radarIndicator
          ]
        },
        series: [
          {
            name: this.title,
            type: 'radar',
            areaStyle: {
              color: this.themeColor,
              opacity: 0.2
            },
            itemStyle: {
              color: this.themeColor
            },
            data: [this.radarData]
          }
        ]
      }
    }
  },
  methods: {
    optionToContent (opt) {
      try {
        const indicator = opt.radar[0].indicator || [];
        const serie = opt.series[0]
        const data = [
          ['能源种类', '数值'],
          ...indicator.map((item, index) => [item.name, defaultNumber(serie.data[index])])
        ]
        return this.generateTable(data)
      } catch (e) {
        console.warn(e)
      }
    }
  },
}
</script>
